<template>
  <div>
    <el-card>
      <el-row>
        <div class="table-header-options">
          <el-button type="primary" :icon="Plus" @click="toAdd()" v-button="['api:sys:sysuser:create']">
            新增
          </el-button>
          <el-button type="success" :icon="Search">查询</el-button>
        </div>
      </el-row>
      <el-row>
        <el-table :data="tableList" :border="true" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <el-table-column prop="userCode" label="账号" />
          <el-table-column prop="userName" label="姓名" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="enabled" label="启用">
            <template #default="scope">
              <el-switch v-model="scope.row.isEnabled" @change="changeEnabled(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" :min-width="400">
            <template #default="scope">
              <el-button type="primary" :icon="Promotion" @click="toUserRole(scope.row)"
                v-button="['api:sys:sysuserrole:getroleuserbyuser']">
                分配角色
              </el-button>
              <el-button type="primary" :icon="Promotion" :disabled="scope.row.isAdmin"
                v-button="['api:sys:sysusermenu:index']" @click="toUserMenu(scope.row)">
                分配菜单
              </el-button>
              <el-button type="primary" :icon="EditPen" :disabled="scope.row.isAdmin" @click="toEdit(scope.row)"
                v-button="['api:sys:sysuser:update']">
                编辑
              </el-button>
              <div class="more" v-button="['api:sys:sysuser:delete', 'api:sys:sysuser:resetpassword']">
                <el-dropdown trigger="click">
                  <el-button plain>
                    更多
                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <div v-button="['api:sys:sysuser:delete']">
                        <el-dropdown-item @click="toDelete(scope.row)" :disabled="scope.row.isAdmin">
                          <el-text type="danger">删除</el-text>
                        </el-dropdown-item>
                      </div>
                      <div v-button="['api:sys:sysuser:resetpassword']">
                        <el-dropdown-item @click="toResetPassword(scope.row)">
                          <el-text type="warning">重置密码</el-text>
                        </el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div class="table-buttom-options">
          <Pagination :total="search.total" v-model:pageIndex="search.pageIndex" v-model:pageSize="search.pageSize"
            @change="query()"></Pagination>
        </div>
      </el-row>
    </el-card>

    <Edit v-if="openEdit" v-model="openEdit" :type="editEnum" :title="title" :info="info" @success="query()"></Edit>
    <UserMenu v-if="userMenuOpen" v-model="userMenuOpen" :title="title" :userId="userId" @success="query()"></UserMenu>
    <UserRole v-if="userRoleOpen" v-model="userRoleOpen" :title="title" :userId="userId" @success="query()"></UserRole>
  </div>
</template>

<script lang="ts" setup>
import Edit from "@/views/sys/user/edit.vue";
import UserMenu from "@/views/sys/user/userMenu.vue";
import UserRole from "@/views/sys/user/userRole.vue";
import { Plus, Delete, EditPen, Search, Promotion, RefreshLeft } from "@element-plus/icons-vue";
import Pagination from "@/components/pagination/pagination.vue";
import successMsg from "@/utils/successMsg";
import UserApi, { EditUser, UserList, UserQuery } from "@/api/sys/user/index";
import { EditEnum } from "@/enums/EditEnum";
defineOptions({
  name: "user",
  inherititems: false,
});
//查询条件
const search = reactive<UserQuery>({
  searchString: "",
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

//表格数据
const tableList = ref<UserList[]>();

onMounted(async () => {
  await query();
});

const query = async () => {
  const { dataList, totalCount } = await UserApi.query(search);
  tableList.value = dataList;
  search.total = totalCount;
};

const editEnum = ref<EditEnum>();
const openEdit = ref(false);
const toAdd = () => {
  info.value = { id: "" };
  editEnum.value = EditEnum.create;
  title.value = "新增";
  openEdit.value = true;
};

const info = ref<EditUser>();
const toEdit = (row: EditUser) => {
  info.value = Object.assign({}, row);
  editEnum.value = EditEnum.update;
  title.value = "修改";
  openEdit.value = true;
};

const toDelete = async (row: UserList) => {
  const { success, message } = await UserApi.delete(row.id);
  successMsg(success, message, await query());
};

const toResetPassword = async (row: UserList) => {
  const { success, message } = await UserApi.resetPassword(row.id);
  successMsg(success, message);
};

const changeEnabled = async (row: UserList) => {
  const { success, message } = await UserApi.update(row);
  successMsg(success, message);
};

const userMenuOpen = ref(false);
const userId = ref("");
const toUserMenu = (row: UserList) => {
  userId.value = row.id;
  title.value = "选择菜单";
  userMenuOpen.value = true;
};

const title = ref("");
const userRoleOpen = ref(false);
const toUserRole = (row: UserList) => {
  userId.value = row.id;
  title.value = "选择角色";
  userRoleOpen.value = true;
};
</script>

<style lang="scss" scoped>
.more {
  display: inline;
}

button+.more {
  margin: 0 12px;
}
</style>
